<template>
  <!--工作量新增弹层start -->
  <el-dialog
    v-dialogDrag
    :title="dialogTitle"
    :close-on-click-modal="false"
    :visible.sync="dialogVisible"
    class="dialogStyleSmall"
    :before-close="cancel"
  >
    <el-form
      ref="addForm"
      class="dialog-form"
      :model="formData"
      :rules="rules"
      label-width="80px"
    >
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="钻机类型" prop="equipmentTypeName">
            <el-input v-model="formData.equipmentTypeName" readonly placeholder="请输入钻机类型" size="medium" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="地貌类型" prop="regionTypeId">
            <el-select v-model="formData.regionTypeId" clearable size="medium" placeholder="请选择地貌类型">
              <el-option
                v-for="item in regionOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="" prop="workloadUnit">
            <label slot="label" v-html="`单&emsp;&emsp;位`" />
            <el-select v-model="formData.workloadUnit" clearable size="medium" placeholder="请选择单位">
              <el-option
                v-for="item in workloadUnitOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-row>
            <el-form-item label="" prop="maxWorkload">
              <label slot="label" v-html="`工&ensp;作&ensp;量`" />
              <el-input v-model="formData.maxWorkload" placeholder="请输入最大工作量" size="medium" />
            </el-form-item>
          </el-row>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <DialogFooter />
    </div>
  </el-dialog>
</template>

<script>
import { addWorkLoad, editWorkLoad, detailWorkLoad } from '@/api/superviseBaseInfo/typeConfig/workload'
import DialogFooter from '@/components/Common/Btns/DialogFooter/index'
export default {
  components: {
    DialogFooter
  },
  props: {
    regionOptions: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      // 单位类型
      workloadUnitOptions: [
        { value: '0', label: '米' }
      ],
      /* 新增 start*/
      dialogTitle: '', // 弹层标题
      dialogVisible: false, // 弹层是否显示
      btnDisabled: false, // 确定按钮
      formData: { // 新增数据
        id: '',
        equipmentId: '', // 设备id
        equipmentTypeName: '',
        regionTypeId: '', // 地貌类型
        workloadUnit: '', // 单位
        maxWorkload: '' // 最大工作量
      },
      // 表单验证规则
      rules: {
        equipmentTypeName: [
          { required: true, message: '设备名称不能为空', trigger: 'blur' }
        ],
        regionTypeId: [
          { required: true, message: '地貌类型不能为空', trigger: 'blur' }
        ],
        workloadUnit: [
          { required: true, message: '单位不能为空', trigger: 'blur' }
        ],
        maxWorkload: [
          { required: true, message: '最大工作量不能为空', trigger: 'blur' }
        ]
      }
      /* 新增 end*/

    }
  },
  methods: {
    /* 新增/编辑弹层 start*/
    handleAdd(title, id) {
      const { id: equipmentId, typeName: equipmentTypeName } = this.$route.query
      this.dialogTitle = title
      this.dialogVisible = true
      this.emptyAddForm() // 清空
      this.formData = { ...this.formData, equipmentId, equipmentTypeName }
      if (id) {
        this.getDetailById(id, equipmentTypeName)
      }
    },
    // 获取详情
    async getDetailById(id, equipmentTypeName) {
      const { data } = await detailWorkLoad(id)
      if (data) {
        this.formData = { ...data, equipmentTypeName }
      }
    },
    // 取消按钮
    cancel() {
      this.dialogVisible = false
      this.btnDisabled = false
      this.emptyAddForm()
    },
    // 提交按钮
    submitForm() {
      this.$refs['addForm'].validate(async valid => {
        if (valid) {
          this.btnDisabled = true
          if (this.formData.id) {
            // 更新
            await editWorkLoad(this.formData)
            this.msgSuccess('修改成功')
          } else {
            await addWorkLoad(this.formData)
            this.msgSuccess('保存成功')
          }
          this.cancel()
          this.$parent.getList()
        }
      })
    },
    // 表单重置
    emptyAddForm() {
      this.resetForm('addForm')
      this.formData.id = ''
      this.formData.maxWorkload = ''
    }
    /* 新增弹层 end*/
  }

}
</script>

<style scoped>
.line {
  width: 13px;
  height: 1px;
  background: #ccc;
  margin: 15px auto;
}
</style>
